<template>
  <div class="fenpei">
    <div class="fenpeis">
      <el-button type="primary" @click="fanhui"> 返回 </el-button>
      <el-button type="primary" @click="fenpei"> 删除 </el-button>
      <el-button type="primary" @click="daochus">
        导出
        <i class="el-icon-plus el-icon--right"></i>
      </el-button>
    </div>
    <div class="tables">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span>{{ (page - 1) * 15 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="申报id"> </el-table-column>
        <el-table-column prop="award_name" label="类别"> </el-table-column>
        <el-table-column prop="type_name" label="类型"> </el-table-column>
        <el-table-column prop="project_name" label="名称" width="400">
        </el-table-column>
        <el-table-column prop="com_name" label="申报单位"> </el-table-column>
        <el-table-column prop="user_name" label="申请人" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenye">
      <!-- <el-pagination
        layout="prev, pager, next"
        :total="num_page"
        @current-change="handleCurrentChange"
      >
      </el-pagination> -->
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="num_page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  award_split,
  award_split_del,
  typeApi,
  user_select,
  award_find,
} from "../axios/api";
export default {
  data() {
    return {
      award_id: "",
      num_page: 0,
      com_id: "",
      id: this.$route.query.id,
      page: 1,
      type_id: "",
      tableData: [],
      tableDatas: [],
      multipleSelection: [],
      options: [],
      option: [],
      options1: [],
      tableHeight: "400px",
    };
  },
  created() {
    this.award_split();
    this.typeApi();
    this.user_select();
    this.award_find();
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.setTableHeight();
      // 监听窗口大小变化
      window.onresize = () => {
        this.setTableHeight();
      };
    });
  },
  methods: {
    setTableHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
      console.log("this.tableHeight");
      console.log(this.tableHeight);
    },
    award_find() {
      award_find().then((res) => {
        this.options1 = res.data.data;
      });
    },
    user_select() {
      user_select().then((res) => {
        this.option = res.data.data;
      });
    },
    typeApi() {
      typeApi().then((res) => {
        console.log(res);
        this.options = res.data.data;
        console.log(this.options);
      });
    },
    award_split() {
      let aaa = {
        fz_id: localStorage.getItem("idse"),
        page: this.page,
        token: sessionStorage.getItem("Token1"),
      };
      award_split(aaa).then((res) => {
        console.log(res);
        this.tableData = res.data.data.data;
        this.num_page = res.data.data.total;
      });
    },
    fanhui() {
      this.$router.push({ path: "/fenzu" });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.award_split();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    daochus() {
      window.location.href =
        "http://" +
        window.location.host +
        "/common/fz_award_export?token=" +
        sessionStorage.getItem("Token1") +
        "&fz_id=" +
        localStorage.getItem("idse") +
        "";
    },
    fenpei() {
      let arr = [];
      if (this.multipleSelection) {
        this.multipleSelection.forEach((item) => {
          arr.push(item.id);
        });
      }
      let aaa = {
        split_id: arr,
        // review_id: localStorage.getItem("idse"),
        token: sessionStorage.getItem("Token1"),
      };
      award_split_del(aaa).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });

          this.award_split();
        } else {
          this.$message({
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.fenpei {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.fenpeis {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  align-items: center;
}
.fenpeis > div {
  margin: 0 10px;
}
.tables {
  width: 90%;
  /* height: 80%; */
  margin: 0 auto;
  /* overflow: scroll; */
}
.fenye {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>